<template>
	<view class="w-full" style="color: #636363;">
		<view class="w-full border-b text-white p-2 box-border flex gap-10" style="border-color: #303030;">
			<view :class="{active:active=='市价'}" class="pb-1 cursor-pointer" @click="clickTab('市价')">
				{{$t('bibi.shijia')}}</view>
			<view :class="{active:active=='限价'}" class="pb-1 cursor-pointer" @click="clickTab('限价')">
				{{$t('bibi.xianjia')}}</view>
		</view>
		<view class="w-full justify-around items-center flex my-4" style="background-color: #2e2e2e;">
			<view class="text-white">{{$t('heyue.kaicang')}}</view>
			<view class="relative">
				<view class="absolute text-white flex items-center" style="top: 8px;">
					{{search.beishu}}X
					<el-icon color="#007bff"><EditPen /></el-icon>
				</view>
				<el-select v-model="search.beishu" placeholder="Select" size="large" style="width: 40px;opacity: 0;">
					<el-option v-for="item in beishuList" :key="item.value" :label="item.label" :value="item.value" />
				</el-select>
			</view>
		</view>
		<view class="flex p-2 justify-between">
			<view class="p-2 flex flex-col gap-6 flex-1">
				<view v-if="active=='市价'">
					<el-input :placeholder="$t('bibi.shijia')" size="large" disabled>
						<template #prepend>
							<view class="text-white">{{$t('bibi.jiage')}}</view>
						</template>
					</el-input>
				</view>
				<view v-if="active=='限价'">
					<el-input v-model="usdt.xianjia" :placeholder="$t('bibi.shijia')" size="large" type="number">
						<template #prepend>
							<view class="text-white">{{$t('bibi.jiage')}}</view>
						</template>
						<template #append>
							<view class="text-white">USDT</view>
						</template>
					</el-input>
				</view>
				<view>
					<el-input v-model="usdt.num" :min="0" placeholder="USDT" size="large" type="number">
						<template #prepend>
							<view class="text-white">{{$t('heyue.baozhengjing')}}</view>
						</template>
					</el-input>
				</view>
				<view class="p-4">
					<el-slider v-model="usdt.slider" :step="25" :marks="{0:'0',100:'100%'}" show-stops/>
				</view>
				<view class="text-md p-2 flex flex-col gap-6">
					<view class="flex w-full justify-between">
						<view>{{$t('bibi.kekai')}}</view>
						<view class="text-white">0</view>
					</view>
					<view class="flex w-full justify-between">
						<view>{{$t('bibi.shuliang')}}</view>
						<view class="text-white">{{usdt.num*search.beishu}}</view>
					</view>
					<view class="flex w-full justify-between border-b pb-4" style="border-color: #fff;">
						<view>{{$t('heyue.keyong')}}</view>
						<view class="text-white flex items-center gap-1">
							USDT
							<el-icon color="#2266F4"><Sort /></el-icon>
						</view>
					</view>
					<view>
						<el-checkbox v-model="usdt.checkbox" :label="$t('heyue.zhiying')+'/'+ $t('heyue.zhisun')"/>
					</view>
					<view v-if="usdt.checkbox==true" class="flex flex-col gap-10">
						<el-input v-model="usdt.zhiying" :min="0" placeholder="USDT" size="large" type="number">
							<template #prepend>
								<view class="text-white">{{$t('heyue.zhiyingchufajiage')}}</view>
							</template>
						</el-input>
						<el-input v-model="usdt.zhisun" :min="0" placeholder="USDT" size="large" type="number">
							<template #prepend>
								<view class="text-white">{{$t('heyue.zhisunchufajiage')}}</view>
							</template>
						</el-input>
					</view>
				</view>
				<el-button type="primary" color="#60c08c" round size="large" style="color: #fff;">{{$t('bibi.mai')}}
					ETH</el-button>
			</view>
			<view class="line"></view>
			<view class="p-2 flex flex-col gap-6 flex-1">
				<view v-if="active=='市价'">
					<el-input :placeholder="$t('bibi.shijia')" size="large" disabled>
						<template #prepend>
							<view class="text-white">{{$t('bibi.jiage')}}</view>
						</template>
					</el-input>
				</view>
				<view v-if="active=='限价'">
					<el-input v-model="eth.xianjia" :placeholder="$t('bibi.shijia')" size="large" type="number">
						<template #prepend>
							<view class="text-white">{{$t('bibi.jiage')}}</view>
						</template>
						<template #append>
							<view class="text-white">USDT</view>
						</template>
					</el-input>
				</view>
				<view>
					<el-input v-model="eth.num" :min="0" placeholder="USDT" size="large" type="number">
						<template #prepend>
							<view class="text-white">{{$t('heyue.baozhengjing')}}</view>
						</template>
					</el-input>
				</view>
				<view class="p-4">
					<el-slider v-model="eth.slider" :step="25" :marks="{0:'0',100:'100%'}" show-stops/>
				</view>
				<view class="text-md p-2 flex flex-col gap-6">
					<view class="flex w-full justify-between">
						<view>{{$t('bibi.kekai')}}</view>
						<view class="text-white">0 USDT</view>
					</view>
					<view class="flex w-full justify-between">
						<view>{{$t('bibi.shuliang')}}</view>
						<view class="text-white">{{eth.num*search.beishu}}</view>
					</view>
					<view class="flex w-full justify-between border-b pb-4" style="border-color: #fff;">
						<view>{{$t('heyue.keyong')}}</view>
						<view class="text-white flex items-center gap-1">
							USDT
							<el-icon color="#2266F4"><Sort /></el-icon>
						</view>
					</view>
					<view>
						<el-checkbox v-model="eth.checkbox" :label="$t('heyue.zhiying')+'/'+ $t('heyue.zhisun')"/>
					</view>
					<view v-if="eth.checkbox==true" class="flex flex-col gap-10">
						<el-input v-model="eth.zhiying" :min="0" placeholder="USDT" size="large" type="number">
							<template #prepend>
								<view class="text-white">{{$t('heyue.zhiyingchufajiage')}}</view>
							</template>
						</el-input>
						<el-input v-model="eth.zhisun" :min="0" placeholder="USDT" size="large" type="number">
							<template #prepend>
								<view class="text-white">{{$t('heyue.zhisunchufajiage')}}</view>
							</template>
						</el-input>
					</view>
				</view>
				<el-button type="primary" color="#bb4965" round size="large">{{$t('bibi.maim')}} ETH</el-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {EditPen,Sort} from '@element-plus/icons-vue'
	import {
		mapState,
		mapActions
	} from 'vuex'
	export default {
		data() {
			return {
				search:{
					beishu:'100'
				},
				beishuList:[
					{label:'30X',value:'30'},
					{label:'50X',value:'50'},
					{label:'100X',value:'100'},
					{label:'125X',value:'125'},
					{label:'200X',value:'200'},
				],
				active: '市价',
				usdt: {
					input: '',
					num: 0,
					slider: 0,
					checkbox:false,
					zhiying:0,
					zhisun:0,
					xianjia:'111014.60',
				},
				eth: {
					input: '',
					num: 0,
					slider: 0,
					checkbox:false,
					zhiying:0,
					zhisun:0,
					xianjia:'111014.60',
				}
			}
		},
		components: {EditPen,Sort},
		computed: {
			...mapState({
				mode: state => state.app.mode,
				sysConfig: state => state.app.sysConfig,
			})
		},
		mounted() {},
		methods: {
			clickTab(name) {
				this.active = name
			}
		}
	}
</script>

<style scoped lang="scss">
	.active {
		border-bottom: 2px solid #fff;
	}

	.line {
		width: 1px;
		border-right: 1px solid #303030;
	}
</style>